<template>
	<view class="time-line">
		<view class="percent-bar" >
			<view v-for="(item,index) in barData" :key="index" class="bar-item" :style="{width:item.ratio+'%'}">
				<view :class="item.type === '1'?'b-01':'b-02'" class="bar-inner "></view>
			</view>
		</view>
		<view class="num-box">
			<view class="num-item" v-for="(item,index) in timeArr" :key="index">{{item}}</view>
		</view>
		<view class="line-box">
			<view class="line-item" v-for="(item,index) in timeArr" :key="index"></view>
		</view>
		<view class="tag-box">
			<view class="tag-item" v-for="(item,index) in tagArr" :key="index">
				<view class="tag-square" :style="{background:item.color}"></view>
				<view class="tag-text">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			bookingTimeVo:{
				type:Object,
				default:{}
			}
		},
		watch:{
			bookingTimeVo(newObj,oldObj){
				this.timeArr = newObj.hours
				this.barData = newObj.timeSlotList
			},
			deep:true
		},
		mounted(){
			this.timeArr = this.bookingTimeVo.hours
			this.barData = this.bookingTimeVo.timeSlotList
		},
		data() {
			return {
				barData: [],
				timeArr:[],
				tagArr:[
					{
						text:'已预定',
						color:'#f7cf3e'
					},
					{
						text:'可预约',
						color:'#c3cbc5'
					},
				]
			};
		},
		methods: {
           classType(type){
			   switch(type){
				   case 1:
				   return 'b-01'
				   break;
				   case 2:
				   return 'b-02'
				   break;
				   case 3:
				   return 'b-03'
				   break;
			   }
		   }
		}
	};
</script>

<style scoped lang="scss">
	.time-line{
		position: relative;
		
		.percent-bar {
			position: relative;
			height: 26rpx;
			width: 100%;
			display: flex;
			border-radius: 20rpx;
			overflow: hidden;
		
			.bar-item {
				display: flex;
			}
			
			.bar-inner{
				flex: 1;
			}
		
			.b-01 {
				background: #f7cf3e;
			}
		
			.b-02 {
				background: #c3cbc5;
			}
		}
		
		.num-box{
			display: flex;
			margin-top: 8rpx;
			
			.num-item{
				flex: 1;
				font-size: 18rpx;
				text-align: left;
				margin-left: -5rpx;
			}
		}
		
		.line-box{
			width: 100%;
			display: flex;
			position: absolute;
			top: 10rpx;
			left: 0;
			height: 16rpx;
			border-radius: 20rpx;
			overflow: hidden;
			
			.line-item{
				flex: 1;
		        border-right: 1px solid #FFF;
			}
		}
		
		.tag-box{
			display: flex;
			margin-top: 20rpx;
			
			.tag-item{
				display: flex;
				align-items: center;
				margin-right: 40rpx;
				font-size: 24rpx;
				
				.tag-square{
					width: 46rpx;
					height: 22rpx;
					border-radius: 20rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	
</style>